<template>
  <view class="main">
    <view class="top dispaly-just-between">
      <view class="top-item dispaly-col-center">
        <view class="name">圈子成员</view>
        <view class="desc">{{ getCircleInfoData?.memberNum || 0 }}</view>
      </view>
      <view class="line"></view>
      <view class="top-item dispaly-col-center">
        <view class="name">浏览数</view>
        <view class="desc">{{ getCircleInfoData?.scanNum || 0 }}</view>
      </view>
      <view class="line"></view>
      <view class="top-item dispaly-col-center">
        <view class="name">入群状态</view>
        <view class="desc">无需审核</view>
      </view>
    </view>
    <view class="dynamic">
      <view class="dynamic-title dispaly-just-between">
        <view class="dynamic-t-left">圈子动态</view>
        <view
          class="dynamic-t-right"
          @click="$goUrl(`/pages/circle/pages/circleDynamic?id=${circleId}`)"
          >更多</view
        >
      </view>
      <view class="dynamic-box">
        <template v-if="getMessageData?.length">
          <scroll-view
            scroll-y="true"
            class="scroll-Y"
            style="height: 150rpx; max-height: 150rpx"
          >
            <view v-for="(item, index) in getMessageData">
              <view class="dynamic-item dispaly-just-between">
                <view class="dynamic-name dispaly-center">
                  <view>{{ item?.nickName || "暂无昵称" }}：</view>
                  <view>
                    <view class="type" v-if="item?.type == 0">发布帖子</view>
                    <view class="type" v-if="item?.type == 1">发布供需</view>
                    <view class="type" v-if="item?.type == 2">文章推荐</view>
                    <view class="type" v-if="item?.type == 3">加入圈子</view>
                    <view class="type" v-if="item?.type == 4">推荐入圈</view>
                    <view class="type" v-if="item?.type == 5">退出圈子</view>
                  </view>
                </view>
                <view class="dynamic-time">{{ item?.createTime }}</view>
              </view>
            </view>
          </scroll-view>
        </template>
        <view v-else>暂无</view>
      </view>
    </view>
    <view class="setting">
      <view class="setting-title">基本设置</view>
      <view class="setting-box dispaly-just-between">
        <view
          class="setting-item dispaly-col-center"
          @click="$goUrl(`/pages/circle/pages/personManage?id=${circleId}`)"
        >
          <view class="set-name">
            <view class="name">成员管理</view>
            <view class="num">{{ getCircleInfoData?.memberNum }}</view>
          </view>
          <view class="number">{{ getCircleInfoData?.memberNum }}人</view>
        </view>
        <view
          class="setting-item dispaly-col-center"
          @click="
            $goUrl(
              `/pages/circle/pages/circleSetting?data=${JSON.stringify({
                id: getCircleInfoData?.id,
                name: getCircleInfoData?.name,
                memberNum: getCircleInfoData?.memberNum,
              })}`
            )
          "
        >
          <view class="set-name">圈子设置</view>
          <view class="number">&nbsp;</view>
        </view>
        <view
          class="setting-item dispaly-col-center"
          @click="showPoster = true"
        >
          <view class="set-name">推广海报</view>
          <view class="number">&nbsp;</view>
        </view>
      </view>
    </view>
    <view class="setting">
      <view class="setting-title">高级设置</view>
      <view style="margin-top: 24rpx">
        <van-grid column-num="3" clickable>
          <van-grid-item
            :text="item.name"
            v-for="(item, index) in optionList"
            :key="index"
            @click="
              item.id != 7
                ? $goUrl(
                    item.path +
                      `?id=${circleId}&businessCode=${circleInfos.businessCode}`
                  )
                : $goUrl('back')
            "
          />
        </van-grid>
      </view>
    </view>
  </view>

  <view class="option-more dispaly-just-between">
    <view class="option-item dispaly-align-center" @click="shwoYdFun(1)"
      >收藏</view
    >
    <view class="option-item dispaly-align-center" @click="shwoYdFun(2)"
      >推广圈子</view
    >
    <view
      v-if="circleInfos?.createUser == userInfo.userId"
      class="option-item dispaly-align-center"
      @click="deleteCircleShow = true"
      >删除圈子</view
    >
  </view>

  <!-- 海报 -->
  <!-- <Poster :showPoster="showPoster" /> -->
  <van-popup v-model:show="showPoster" round>
    <view class="pop-main">
      <Poster :circleInfos="circleInfos" />
    </view>
  </van-popup>
  <van-overlay :show="showYd" @click="showYd = false" z-index="999">
    <view class="over-main dispaly-align-center">
      <view class="dispaly-align-center over">
        <view class="t">请点击右上角按钮</view>
        <view class="d dispaly-align-center">...</view>
        <view class="t">{{ ydText }}</view>
        <image src="/static/icon/yd.svg" mode="widthFix" />
      </view>
    </view>
  </van-overlay>

  <!-- 删除帖子提示 -->
  <van-dialog
    @confirm="deleteCircle"
    v-model:show="deleteCircleShow"
    title="提示"
    show-cancel-button
    message="确认删除该圈子吗？"
  >
  </van-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Poster from "@/components/poster/poster.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  getMessage,
  circleInfo,
  delCircle,
  getMessagePage,
  getPowerInfo,
} from "@/api/apiList";
const circleId = ref();
const newNum = ref(0);
const memberNum = ref(0);
onLoad((e) => {
  if (e && e?.id) {
    newNum.value = e.newNum;
    memberNum.value = e.memberNum;
    circleId.value = e?.id;
  }
});
const userInfo = uni.getStorageSync("userInfo");
const getCircleInfoData = ref();
const optionList = ref();
onShow(() => {
  getMessageChange(circleId.value);
  getCircleInfo(circleId.value);
  // circleInfoData(circleId.value);
  getPageListChange(circleId.value);
  optionList.value = [
    // {
    //   name: "付费进圈",
    //   id: "1",
    //   path: "/pages/circle/pages/buyCircle",
    // },
    // { name: "导入名单", id: "2", path: "/pages/circle/pages/importList" },
    // {
    //   name: "管理员设置",
    //   id: "3",
    //   path: "/pages/circle/pages/managePersonSetting",
    // },
    // { name: "我的信息", id: "4", path: "/pages/circle/pages/myInfo" },
    // { name: "置顶管理", id: "5", path: "/pages/circle/pages/topManage" },
    // { name: "电话展示设置", id: "6", path: "/pages/circle/pages/telShow" },
    // { name: "圈子详情", id: "7" },
    // { name: "商户号", id: "8", path: "/pages/circle/pages/shopNumber" },
  ];
});

const getPageListChange = async (ids) => {
  const response = await getPowerInfo({
    id: ids ? ids : circleId.value,
  });
  if (response && response.code == 200 && response.data.power) {
    response.data.power.map((items) => {
      optionList.value.push({
        name: items.name,
        path:
          items.name == "付费进圈"
            ? "/pages/circle/pages/buyCircle"
            : items.name == "导入名单"
            ? "/pages/circle/pages/importList"
            : items.name == "管理员设置"
            ? "/pages/circle/pages/managePersonSetting"
            : items.name == "我的信息"
            ? "/pages/circle/pages/myInfo"
            : items.name == "置顶管理"
            ? "/pages/circle/pages/topManage"
            : items.name == "电话展示设置"
            ? "/pages/circle/pages/telShow"
            : items.name == "圈子详情"
            ? ""
            : items.name == "商户号"
            ? "/pages/circle/pages/shopNumber"
            : "",
      });
    });
  }
};

const showYd = ref(false);
const showPoster = ref(false);

const ydText = ref("");
const shwoYdFun = (type) => {
  ydText.value = type == 1 ? "选择收藏" : "分享到微信";
  showYd.value = true;
};

// 删除圈子
const deleteCircle = async () => {
  const res = await delCircle({ circleId: circleId.value });
  if (res.code == 200) {
    uni.showToast({
      title: "删除成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.switchTab({
        url: "/pages/circle/circleIndex",
      });
    }, 1000);
  }
};

const deleteCircleShow = ref(false);
const getCircleInfo = async (ids) => {
  const response = await circleInfo({ id: ids });
  if (response?.code == 200) {
    getCircleInfoData.value = response?.data;

    circleInfos.value = response?.data;
    // console.log(111111111);
    // console.log(circleInfos.value);
  }
};

const getMessageData = ref();
const getMessageChange = async (ids) => {
  const response = await getMessagePage({ circleId: ids, pageSize: 3 });
  if (response && response?.code == 200) {
    // let arr = [];
    // response.rows.forEach((item) => {
    //   item.type = 5;
    //   arr.push(item);
    // });
    getMessageData.value = response?.rows;
  }
};

const circleInfos = ref();
// const circleInfoData = async (ids) => {
//   const response = await circleInfo({ id: ids });
//   if (response && response?.code == 200) {
//     circleInfos.value = response?.data;
//   }
// };
</script>

<style lang="scss" scoped>
.over-main {
  .over {
    width: 640rpx;
    background-color: #fff;
    padding: 84rpx 0;
    border-radius: 16rpx;
    position: relative;
    margin-top: 120rpx;
    text-align: center;

    .t {
      font-family: PingFang SC Bold;
      font-size: 36rpx;
      color: #111111;
    }

    .d {
      width: 64rpx;
      height: 40rpx;
      border-radius: 8rpx;
      background: #ffffff;
      box-sizing: border-box;
      border: 1rpx solid #111111;
      margin: 0 10rpx;
    }

    image {
      position: absolute;
      top: -90rpx;
      right: 0;
      width: 140rpx;
      height: 130rpx;
    }
  }
}

.main {
  .top {
    background-color: #fff;
    padding: 40rpx 60rpx;

    .top-item {
      .name {
        font-family: PingFang SC Bold;
        font-size: 32rpx;
        font-weight: 700;
        color: #111111;
      }

      .desc {
        margin-top: 20rpx;
        font-family: PingFang SC Medium;
        font-size: 26rpx;
        color: #777777;
      }
    }

    .line {
      width: 1rpx;
      height: 48rpx;
      background: #0753fd;
    }
  }

  .dynamic {
    margin-top: 24rpx;

    .dynamic-title {
      padding: 0 28rpx;

      .dynamic-t-left {
        font-family: PingFang SC Medium;
        font-size: 24rpx;
        color: #777777;
      }

      .dynamic-t-right {
        font-family: PingFang SC Medium;
        font-size: 24rpx;
        color: #0753fd;
      }
    }

    .dynamic-box {
      margin-top: 24rpx;
      padding: 30rpx;
      background-color: #fff;

      .dynamic-item:last-child {
        margin-bottom: 0;
      }

      .dynamic-item {
        margin-bottom: 28rpx;

        .dynamic-name {
          font-family: PingFang SC Regular;
          font-size: 26rpx;
          color: #111111;
        }

        .dynamic-time {
          font-family: PingFang SC Medium;
          font-size: 24rpx;
          color: #aaaaaa;
        }
      }
    }
  }

  .setting {
    margin-top: 24rpx;

    .setting-title {
      padding: 0 28rpx;
      font-family: PingFang SC Medium;
      font-size: 24rpx;
      color: #777777;
    }

    .setting-box {
      background-color: #fff;
      padding: 40rpx 70rpx;
      margin-top: 24rpx;

      .setting-item {
        .set-name {
          font-family: PingFang SC Medium;
          font-size: 28rpx;
          font-weight: 700;
          color: #0753fd;
          position: relative;

          .num {
            position: absolute;
            background-color: #fd0f07;
            font-family: PingFang SC Medium;
            font-size: 22rpx;
            color: #ffffff;
            // padding: 8rpx;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            top: -30rpx;
            right: -30rpx;
            text-align: center;
            line-height: 40rpx;
          }
        }

        .number {
          font-family: PingFang SC Medium;
          font-size: 26rpx;
          color: #777777;
        }
      }
    }
  }
}

:deep(.van-grid-item__text) {
  font-family: PingFang SC Medium;
  font-size: 28rpx;
  font-weight: 700;
  color: #0753fd;
}

:deep(.van-grid-item__content) {
  padding: 52rpx 0;
}

.option-more {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  .option-item:nth-child(2) {
    border-left: 1rpx solid #fff;
    border-right: 1rpx solid #fff;
  }

  .option-item {
    width: 33.33%;
    height: 100rpx;
    background-color: #0753fd;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #ffffff;
    flex: 1;
  }
}
</style>
